import React, { Component } from 'react';
import './DetailStyle.scss';
import Detailitem from './DetailItem';
import { BackTop } from 'antd';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  // componentDidMount () {
  //   fetch('http://localhost:3001/api/test/profile')
  //   .then(res => res.json())
  //   .then(data => {
  //     data = data.lists
  //     console.log("111111111111111", data)
  //   })
  // }
   componentDidMount(){
    var books = document.getElementsByClassName('Wrapper-left')[0]
    books.style.display='none';
   }
  componentWillUnmount() {
    var books = document.getElementsByClassName('Wrapper-left')[0]
    books.style.display='block';
}
//   handleScroll(){
//     console.log(window.scrollY)
//     var obj = document.getElementsByClassName('common-header')[0];
//     var obj1 = document.getElementsByClassName('headerBox')[0];
//     //var obj2 = document.getElementsByClassName('wrapper-big')[0];
//     if (window.scrollY >= 1) {
//             obj.style.display= 'none';
//             obj1.style.position = 'fixed';
//             obj1.style.top = '0px';
//             obj1.style.zIndex = '100';
//           }else{
//             obj.style.display = 'block';
//             obj1.style.position = 'fixed';
//             obj1.style.top = '60px';
//             //obj2.style.marginTop='68px'  
//           }
//   }
  
  render () { 
    // var images = []
    var Detailist= JSON.parse(localStorage.getItem('movielist'))
   
    //  console.log(images)
    const { alt, title,intro,Name,ability,price,images,image,buyer} = Detailist[0];
    return (
      <div className = 'ClearSomeWhere'>
       <div>
                    <BackTop>
                        <div className="ant-back-top-inner" title="回到顶部">^</div>
                    </BackTop>
                </div>
        <div className='Wrapper-detail'>
          <div className = 'DetailImg'>
            <img src={image} alt='' />
         </div>
         <div className = "DetailTitle">
          <h3 style = {{ cursor:'pointer' }} >{ title }</h3>
          <p><span style = {{ cursor:'pointer' }}>{ intro } </span></p>
          <p className = 'Detailimgs'><img src = { images } alt = { alt } style = {{ width:'20px',height:'20px',border:'1px solid #cecece',borderRadius:'50%',cursor:'pointer'}}/><span style = {{ marginLeft : '18px',color:'#777 !importent',cursor:'pointer'}}>{ Name }</span><span style = {{ marginLeft : '6px' ,cursor:'pointer'}}>{ ability }</span></p>
          <p className = 'DetailBuy'><span style = {{ color: '#fff' ,cursor:'pointer',background:'#007fff'}} >购买{ price }</span><span style = {{ marginLeft : '18px' ,cursor:'pointer',width:'100px'}}>试读</span></p>
        </div>
        </div>
        <div className="bookBought">
        <p className = 'DetailBuyerDetail'><img src = 'https://b-gold-cdn.xitu.io/v3/static/img/buy-icon.1323aad.svg' alt ='' style={{ width:'33px' }}/>
          <span style = {{cursor:'pointer',marginRight:'9px'}} >{ buyer }人已购买</span>
          <span>{Detailist.map((item, index) => {return(<img src = { item.images } alt='' />)})}</span></p>
        </div>
        <Detailitem />
        {/* <div className = 'ClearSomething'>

        </div> */}
      </div>
    )
  }
}
export default Com;
